<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>(转载)前端缓存 | ty'blog</title><meta name="author" content="lty123"><meta name="copyright" content="lty123"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta property="og:type" content="article">
<meta property="og:title" content="(转载)前端缓存">
<meta property="og:url" content="http://ekzodia_lty.gitee.io/tygame/2021/11/20/%E5%89%8D%E7%AB%AF%E7%BC%93%E5%AD%98/index.html">
<meta property="og:site_name" content="ty&#39;blog">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="http://ekzodia_lty.gitee.io/tygame/img/coverImg/b1.jpg">
<meta property="article:published_time" content="2021-11-20T15:31:19.459Z">
<meta property="article:modified_time" content="2021-11-20T15:32:06.098Z">
<meta property="article:author" content="lty123">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://ekzodia_lty.gitee.io/tygame/img/coverImg/b1.jpg"><link rel="shortcut icon" href="/tygame/img/favicon.png"><link rel="canonical" href="http://ekzodia_lty.gitee.io/tygame/2021/11/20/%E5%89%8D%E7%AB%AF%E7%BC%93%E5%AD%98/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/tygame/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/tygame/',
  algolia: undefined,
  localSearch: undefined,
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '天',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: undefined,
  source: {
    jQuery: 'https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js',
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css'
    },
    fancybox: {
      js: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js',
      css: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: true,
  isanchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: '(转载)前端缓存',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2021-11-20 23:32:06'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const detectApple = () => {
      if (GLOBAL_CONFIG_SITE.isHome && /iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><link rel="stylesheet" href="/tygame/css/custom.css"><link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@1,300&display=swap" rel="stylesheet"><!-- hexo injector head_end start --><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Zfour/Butterfly-double-row-display@1.00/cardlistpost.min.css"/>
<style>#recent-posts > .recent-post-item >.recent-post-info > .article-meta-wrap > .tags:before {content:"\A";
  white-space: pre;}#recent-posts > .recent-post-item >.recent-post-info > .article-meta-wrap > .tags > .article-meta__separator{display:none}</style>
<!-- hexo injector head_end end --><meta name="generator" content="Hexo 5.4.0"></head><body><div id="loading-box"><div class="loading-left-bg"></div><div class="loading-right-bg"></div><div class="spinner-box"><div class="configure-border-1"><div class="configure-core"></div></div><div class="configure-border-2"><div class="configure-core"></div></div><div class="loading-word">加载中...</div></div></div><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "" data-lazy-src="/tygame/img/avatar.jfif" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="site-data"><div class="data-item is-center"><div class="data-item-link"><a href="/tygame/archives/"><div class="headline">文章</div><div class="length-num">10</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/tygame/categories/"><div class="headline">分类</div><div class="length-num">6</div></a></div></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/tygame/"><i class="fa-fw fas fa-home"></i><span> 主页</span></a></div><div class="menus_item"><a class="site-page" href="/tygame/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tygame/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/tygame/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="/tygame/link/"><i class="fa-fw fas fa-link"></i><span> 友情链接</span></a></div><div class="menus_item"><a class="site-page" href="/tygame/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('/tygame/img/coverImg/b1.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/tygame/">ty'blog</a></span><div id="menus"><div class="menus_items"><div class="menus_item"><a class="site-page" href="/tygame/"><i class="fa-fw fas fa-home"></i><span> 主页</span></a></div><div class="menus_item"><a class="site-page" href="/tygame/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tygame/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/tygame/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="/tygame/link/"><i class="fa-fw fas fa-link"></i><span> 友情链接</span></a></div><div class="menus_item"><a class="site-page" href="/tygame/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">(转载)前端缓存</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2021-11-20T15:31:19.459Z" title="发表于 2021-11-20 23:31:19">2021-11-20</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2021-11-20T15:32:06.098Z" title="更新于 2021-11-20 23:32:06">2021-11-20</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/tygame/categories/%E5%85%B6%E4%BB%96/">其他</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">1.5k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>4分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="(转载)前端缓存"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><blockquote>
<p>本文转载自：<a target="_blank" rel="noopener" href="https://zhuanlan.zhihu.com/p/142311416">这是前端需要的缓存知识！ - 知乎 (zhihu.com)</a></p>
</blockquote>
<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>作为一名优秀的前端开发者，必须了解浏览器以及http协议中的缓存策略。因为在日常的开发中，我们会经常接触到一些性能优化的需求，那么缓存（cache）这种技术无论是在前端开发领域也好，后端开发领域也好，也是一种非常常见以及有效的方案。只是前后端之间的缓存方式不太一样，而且后端很多时候需要缓存的是数据，而前端往往需要利用浏览器和http协议去缓存数据或者文件，从而达到提升加载速度的效果。</p>
<h2 id="浏览器缓存"><a href="#浏览器缓存" class="headerlink" title="浏览器缓存"></a>浏览器缓存</h2><p>浏览器的缓存是通过HTTP协议中的一些特定的字段去控制某个文件是否进行缓存，过期时间等信息，用一张简单的图去描述浏览器是如何缓存文件的。</p>
<p><img src= "" data-lazy-src="https://pic4.zhimg.com/80/v2-1bbb2c440c496bc579f0a2477b8a8f1f_720w.jpg" alt="img"></p>
<p>浏览器分为两种缓存策略：</p>
<ol>
<li>强缓存</li>
<li>协商缓存</li>
</ol>
<h2 id="强缓存"><a href="#强缓存" class="headerlink" title="强缓存"></a>强缓存</h2><p>浏览器在先服务器获取资源之前，首先会查看当前的资源是否命中强缓存，如果命中了强缓存，那么将不会进行协商缓存，直接从缓存中获取资源内容进行缓存。</p>
<p>设置一个资源的强缓存一般使用Expires(http1.0)和Cache-Control(http1.1)这两个响应头属性进行设置。</p>
<h3 id="Expires"><a href="#Expires" class="headerlink" title="Expires"></a>Expires</h3><p>Expires字段是http1.0的控制强缓存字段，其值是一个<strong>绝对时间</strong>的GMT格式的时间字符串。代表着该资源的有效时间。但是如果服务器和客户端之间的时间偏差较大，就会出现缓存混乱等情况。</p>
<h3 id="Cache-Control"><a href="#Cache-Control" class="headerlink" title="Cache-Control"></a>Cache-Control</h3><p>Cache-Control是http1.1提出的新强缓存规范，它的值是一个相对时间，例如Cache-Control: max-age=90，代表该资源的有效时间是第一次获取资源后90秒失效。（也是现在最常用的强缓存控制字段）。Cache-Control还有一些其他值可以设置。</p>
<ul>
<li>no-cache:：需要进行协商缓存，由服务器确认是否使用缓存。</li>
<li>no-store： 禁止使用缓存，每一次都要重新请求服务器。</li>
<li>public：可以被所有用户缓存，包括浏览器和cdn等中间代理商。</li>
<li>private：只能对客户端（如浏览器）使用缓存。</li>
</ul>
<blockquote>
<p>为了解决兼容问题，一般Expires和Cache-Control是同时设置的。在支持Cache-Control的http协议中，Cache-Control的优先级更高。</p>
</blockquote>
<h2 id="协商缓存"><a href="#协商缓存" class="headerlink" title="协商缓存"></a>协商缓存</h2><p>协商缓存一般是强缓存没有命中，那么就会进入协商缓存，客户端将当前资源的一些信息携带在请求头的header当中，由服务器判断是否使用缓存，如果命中协商缓存，那么将返回304。</p>
<h3 id="Last-Modify-If-Modify-Since"><a href="#Last-Modify-If-Modify-Since" class="headerlink" title="Last-Modify/If-Modify-Since"></a>Last-Modify/If-Modify-Since</h3><p>浏览器首次请求一个资源的时候，服务器会返回该资源的最后修改时间，通过在响应头的Last-Modify属性中返回最后修改时间，浏览器会将该属性值保存起来，在下一次对同样的资源发起请求的时候，会将上一次请求时获取到Last-Modify的值携带在请求头的If-Modify-Since属性中，如果服务器验证最后修改时间一致，那么将会返回304。否则就会重启响应新的资源内容以及新的最后修改时间给浏览器。</p>
<p>Last-Modify/If-Modify-Since属性有一个缺点，就是返回的值是最后修改时间进行判断的，但是如果文件在一个周期内，发生过改变，但是最后还是变回原样，那么最后修改的时间会发生变化，那么会导致协商缓存失效，导致文件内容并没有变化，但是浏览器会重新下载资源。为了解决这个问题，后来就出现了ETag/If-None-Match。</p>
<h3 id="ETag-If-None-Match"><a href="#ETag-If-None-Match" class="headerlink" title="ETag/If-None-Match"></a>ETag/If-None-Match</h3><p>ETag/If-None-Match和Last-Modify/If-Modify-Since不一样，ETag/If-None-Match返回的是该资源的唯一标识，而且是个资源的内容挂钩的，如果你多次修改文件，但是文件最终的内容还是一样，那么ETag的标识码还是一样的。这样就有效的解决了Last-Modify/If-Modify-Since的问题。</p>
<p>ETag/If-None-Match和Last-Modify/If-Modify-Since的携带方式是一样。</p>
<h2 id="浏览器的资源缓存策略"><a href="#浏览器的资源缓存策略" class="headerlink" title="浏览器的资源缓存策略"></a>浏览器的资源缓存策略</h2><p>在通过访问浏览器获取资源后，浏览器本身也有一套缓存的文件存放机制，主要分为<strong>memory cache</strong>和<strong>disk cache</strong>两种方式。从名字上就很清晰知道一个是存放在内存当中，一个是存放到硬盘当中。</p>
<h3 id="memory-cache"><a href="#memory-cache" class="headerlink" title="memory cache"></a>memory cache</h3><p>webkit内核将资源分为两种，一种是HTML资源，或者下载项资源。另外一种是派生资源，例如JS、CSS和图片。webkit只支持对派生资源中的JS、CSS、图片等存放在memory cache中。其他派生资源都是存放在disk cache中。进程关闭时，内存缓存将会被清除。</p>
<p><img src= "" data-lazy-src="https://pic3.zhimg.com/80/v2-1d68403bd6e9a15932549c9e96289396_720w.png" alt="img"></p>
<h3 id="disk-cache"><a href="#disk-cache" class="headerlink" title="disk cache"></a>disk cache</h3><p>如上述所说的，资源都会存放到硬盘中。进程关闭时，硬盘缓存不会清除。那么什么资源什么时候会存放到硬盘，什么时候会存放到内存呢？</p>
<p><img src= "" data-lazy-src="https://pic4.zhimg.com/80/v2-1b995c207dd58cbf06af6d00ce95bdf3_720w.png" alt="img"></p>
<blockquote>
<p>这个需要看当前的资源的大小，内存空间是否足够等因素决定。</p>
</blockquote>
<h2 id="浏览器三级缓存"><a href="#浏览器三级缓存" class="headerlink" title="浏览器三级缓存"></a>浏览器三级缓存</h2><ul>
<li>内存中查找缓存资源</li>
<li>内存中没有查找到缓存资源将会在硬盘中查找</li>
<li>硬盘中查找不到资源，将会发起请求获取远程资源</li>
<li>获取到资源后根据资源的类型分别存放到内存或者硬盘中。</li>
</ul>
<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>浏览器缓存一般又三部分组成。</p>
<ul>
<li>强缓存</li>
<li>协商缓存</li>
<li>浏览器的三层缓存</li>
</ul>
<p>理解浏览器和http协议中控制缓存的字段对我们日后进行性能优化起到很关键的作用。</p>
</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="mailto:undefined">lty123</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="http://ekzodia_lty.gitee.io/tygame/2021/11/20/%E5%89%8D%E7%AB%AF%E7%BC%93%E5%AD%98/">http://ekzodia_lty.gitee.io/tygame/2021/11/20/前端缓存/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="http://ekzodia_lty.gitee.io/tygame" target="_blank">ty'blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"></div><div class="post_share"><div class="social-share" data-image="/tygame/img/coverImg/b1.jpg" data-sites="phone,wechat,gitee,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share.js/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/social-share.js/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="next-post pull-full"><a href="/tygame/2021/11/19/%E5%88%86%E4%BC%97%E4%BC%A0%E5%AA%92H%E8%82%A1%E4%B8%8A%E5%B8%82%E5%85%AC%E5%91%8A%E8%A6%81%E7%82%B9%E8%A7%A3%E8%AF%BB/"><img class="next-cover" src= "" data-lazy-src="/tygame/img/coverImg/b3.jpg" onerror="onerror=null;src='/tygame/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">(转载)分众传媒H股上市公告要点解读</div></div></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src= "" data-lazy-src="/tygame/img/avatar.jfif" onerror="this.onerror=null;this.src='/tygame/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">lty123</div><div class="author-info__description"></div></div><div class="card-info-data"><div class="card-info-data-item is-center"><a href="/tygame/archives/"><div class="headline">文章</div><div class="length-num">10</div></a></div><div class="card-info-data-item is-center"><a href="/tygame/categories/"><div class="headline">分类</div><div class="length-num">6</div></a></div></div><a class="button--animated" id="card-info-btn" target="_blank" rel="noopener" href="https://gitee.com/ekzodia_lty"><i></i><span>关注我</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="/tygame/1219186777@qq.com" target="_blank" title="邮箱"><i class="fas fa-envelope"></i></a></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%89%8D%E8%A8%80"><span class="toc-number">1.</span> <span class="toc-text">前言</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BC%93%E5%AD%98"><span class="toc-number">2.</span> <span class="toc-text">浏览器缓存</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%BC%BA%E7%BC%93%E5%AD%98"><span class="toc-number">3.</span> <span class="toc-text">强缓存</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Expires"><span class="toc-number">3.1.</span> <span class="toc-text">Expires</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Cache-Control"><span class="toc-number">3.2.</span> <span class="toc-text">Cache-Control</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8D%8F%E5%95%86%E7%BC%93%E5%AD%98"><span class="toc-number">4.</span> <span class="toc-text">协商缓存</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Last-Modify-If-Modify-Since"><span class="toc-number">4.1.</span> <span class="toc-text">Last-Modify&#x2F;If-Modify-Since</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#ETag-If-None-Match"><span class="toc-number">4.2.</span> <span class="toc-text">ETag&#x2F;If-None-Match</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84%E8%B5%84%E6%BA%90%E7%BC%93%E5%AD%98%E7%AD%96%E7%95%A5"><span class="toc-number">5.</span> <span class="toc-text">浏览器的资源缓存策略</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#memory-cache"><span class="toc-number">5.1.</span> <span class="toc-text">memory cache</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#disk-cache"><span class="toc-number">5.2.</span> <span class="toc-text">disk cache</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%89%E7%BA%A7%E7%BC%93%E5%AD%98"><span class="toc-number">6.</span> <span class="toc-text">浏览器三级缓存</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%80%BB%E7%BB%93"><span class="toc-number">7.</span> <span class="toc-text">总结</span></a></li></ol></div></div><div class="card-widget card-weibo"><div class="card-content"><div class="item-headline"><i class="fab fa-weibo"></i><span>微博热搜</span></div><div id="weibo-container" style="width: 100%; height: 150px;font-size: 95%;"></div></div></div><script defer="defer" data-pjax="data-pjax" src="https://cdn.jsdelivr.net/gh/Eurkon/CDN/hexo/js/card_weibo.js"></script><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/tygame/2021/11/20/%E5%89%8D%E7%AB%AF%E7%BC%93%E5%AD%98/" title="(转载)前端缓存"><img src= "" data-lazy-src="/tygame/img/coverImg/b1.jpg" onerror="this.onerror=null;this.src='/tygame/img/404.jpg'" alt="(转载)前端缓存"/></a><div class="content"><a class="title" href="/tygame/2021/11/20/%E5%89%8D%E7%AB%AF%E7%BC%93%E5%AD%98/" title="(转载)前端缓存">(转载)前端缓存</a><time datetime="2021-11-20T15:31:19.459Z" title="发表于 2021-11-20 23:31:19">2021-11-20</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/tygame/2021/11/19/%E5%88%86%E4%BC%97%E4%BC%A0%E5%AA%92H%E8%82%A1%E4%B8%8A%E5%B8%82%E5%85%AC%E5%91%8A%E8%A6%81%E7%82%B9%E8%A7%A3%E8%AF%BB/" title="(转载)分众传媒H股上市公告要点解读"><img src= "" data-lazy-src="/tygame/img/coverImg/b3.jpg" onerror="this.onerror=null;this.src='/tygame/img/404.jpg'" alt="(转载)分众传媒H股上市公告要点解读"/></a><div class="content"><a class="title" href="/tygame/2021/11/19/%E5%88%86%E4%BC%97%E4%BC%A0%E5%AA%92H%E8%82%A1%E4%B8%8A%E5%B8%82%E5%85%AC%E5%91%8A%E8%A6%81%E7%82%B9%E8%A7%A3%E8%AF%BB/" title="(转载)分众传媒H股上市公告要点解读">(转载)分众传媒H股上市公告要点解读</a><time datetime="2021-11-19T15:56:52.174Z" title="发表于 2021-11-19 23:56:52">2021-11-19</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/tygame/2021/11/07/%E7%AE%80%E5%8D%95%E7%9A%84%E9%98%B2%E6%8A%96%E5%92%8C%E8%8A%82%E6%B5%81/" title="两个简单的防抖和节流"><img src= "" data-lazy-src="/tygame/img/coverImg/b5.jpg" onerror="this.onerror=null;this.src='/tygame/img/404.jpg'" alt="两个简单的防抖和节流"/></a><div class="content"><a class="title" href="/tygame/2021/11/07/%E7%AE%80%E5%8D%95%E7%9A%84%E9%98%B2%E6%8A%96%E5%92%8C%E8%8A%82%E6%B5%81/" title="两个简单的防抖和节流">两个简单的防抖和节流</a><time datetime="2021-11-07T14:43:45.535Z" title="发表于 2021-11-07 22:43:45">2021-11-07</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/tygame/2021/11/07/%E5%8D%9A%E5%AE%A2%E8%A3%85%E4%BF%AE%E5%9C%B0%E5%9B%BE/" title="博客装修地图"><img src= "" data-lazy-src="/tygame/img/coverImg/b1.jpg" onerror="this.onerror=null;this.src='/tygame/img/404.jpg'" alt="博客装修地图"/></a><div class="content"><a class="title" href="/tygame/2021/11/07/%E5%8D%9A%E5%AE%A2%E8%A3%85%E4%BF%AE%E5%9C%B0%E5%9B%BE/" title="博客装修地图">博客装修地图</a><time datetime="2021-11-07T14:39:38.851Z" title="发表于 2021-11-07 22:39:38">2021-11-07</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/tygame/2021/10/31/git%E6%8C%87%E4%BB%A4/" title="git基础指令"><img src= "" data-lazy-src="/tygame/img/coverImg/a6.jpg" onerror="this.onerror=null;this.src='/tygame/img/404.jpg'" alt="git基础指令"/></a><div class="content"><a class="title" href="/tygame/2021/10/31/git%E6%8C%87%E4%BB%A4/" title="git基础指令">git基础指令</a><time datetime="2021-10-31T11:33:26.372Z" title="发表于 2021-10-31 19:33:26">2021-10-31</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2019 - 2021 By lty123</div><div class="footer_custom_text">欢迎参观！！！</div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/tygame/js/utils.js"></script><script src="/tygame/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script>var preloader = {
  endLoading: () => {
    document.body.style.overflow = 'auto';
    document.getElementById('loading-box').classList.add("loaded")
  },
  initLoading: () => {
    document.body.style.overflow = '';
    document.getElementById('loading-box').classList.remove("loaded")

  }
}
window.addEventListener('load',preloader.endLoading())</script><div class="js-pjax"></div><script src="/tygame/js/custom.js"></script><script id="canvas_nest" defer="defer" color="200,0,127" opacity="0.7" zIndex="-1" count="200" mobile="false" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-nest.min.js"></script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div><!-- hexo injector body_end start --> <script data-pjax>if(document.getElementById('recent-posts') && (location.pathname ==='/tygame/'|| '/tygame/' ==='all')){
    var parent = document.getElementById('recent-posts');
    var child = '<div class="recent-post-item" style="width:100%;height: auto"><div id="catalog_magnet"><div class="magnet_item"><a class="magnet_link" href="http://ekzodia_lty.gitee.io/tygame/categories/JavaScript/"><div class="magnet_link_context" style=""><span style="font-weight:500;flex:1">  JavaScript (1)</span><span style="padding:0px 4px;border-radius: 8px;"><i class="fas fa-arrow-circle-right"></i></span></div></a></div><div class="magnet_item"><a class="magnet_link" href="http://ekzodia_lty.gitee.io/tygame/categories/TypeScript/"><div class="magnet_link_context" style=""><span style="font-weight:500;flex:1">  TypeScript (1)</span><span style="padding:0px 4px;border-radius: 8px;"><i class="fas fa-arrow-circle-right"></i></span></div></a></div><div class="magnet_item"><a class="magnet_link" href="http://ekzodia_lty.gitee.io/tygame/categories/CSS/"><div class="magnet_link_context" style=""><span style="font-weight:500;flex:1">  CSS (1)</span><span style="padding:0px 4px;border-radius: 8px;"><i class="fas fa-arrow-circle-right"></i></span></div></a></div><div class="magnet_item"><a class="magnet_link" href="http://ekzodia_lty.gitee.io/tygame/categories/杂记/"><div class="magnet_link_context" style=""><span style="font-weight:500;flex:1">  杂记 (2)</span><span style="padding:0px 4px;border-radius: 8px;"><i class="fas fa-arrow-circle-right"></i></span></div></a></div><div class="magnet_item"><a class="magnet_link" href="http://ekzodia_lty.gitee.io/tygame/categories/金融相关/"><div class="magnet_link_context" style=""><span style="font-weight:500;flex:1">  金融相关 (1)</span><span style="padding:0px 4px;border-radius: 8px;"><i class="fas fa-arrow-circle-right"></i></span></div></a></div><div class="magnet_item"><a class="magnet_link" href="http://ekzodia_lty.gitee.io/tygame/categories/其他/"><div class="magnet_link_context" style=""><span style="font-weight:500;flex:1">  其他 (3)</span><span style="padding:0px 4px;border-radius: 8px;"><i class="fas fa-arrow-circle-right"></i></span></div></a></div><a class="magnet_link_more"  href="http://ekzodia_lty.gitee.io/tygame/categories" style="flex:1;text-align: center;margin-bottom: 10px;">查看更多...</a></div></div>';
    console.log('已挂载magnet')
    parent.insertAdjacentHTML("afterbegin",child)}
     </script><style>#catalog_magnet{flex-wrap: wrap;display: flex;width:100%;justify-content:space-between;padding: 10px 10px 0 10px;align-content: flex-start;}.magnet_item{flex-basis: calc(33.333333333333336% - 5px);background: #f2f2f2;margin-bottom: 10px;border-radius: 8px;transition: all 0.2s ease-in-out;}.magnet_item:hover{background: #b30070}.magnet_link_more{color:#555}.magnet_link{color:black}.magnet_link:hover{color:white}@media screen and (max-width: 600px) {.magnet_item {flex-basis: 100%;}}.magnet_link_context{display:flex;padding: 10px;font-size:16px;transition: all 0.2s ease-in-out;}.magnet_link_context:hover{padding: 10px 20px;}</style>
    <style></style><!-- hexo injector body_end end --></body></html>